<template>
  <div class="password">
    <div class="container password-content">
      <div class="contents">
        <div :class="{'box' : active <= 3 }">
          <div class="step">
            <el-steps :space="200" :active="active" finish-status="success">
              <el-step title="填写用户名" />
              <el-step title="验证身份" />
              <el-step title="设置密码" />
              <el-step title="完成" />
            </el-steps>
          </div>
        </div>
        <div v-if="active === 0" class="one">
          <FirstStep @next="next" @setCodeForm="setCodeForm" />
        </div>
        <div v-else-if="active === 1" class="two">
          <SecondStep :code-form="codeForm" @last="last" @next="next" @setPasswordForm="setPasswordForm" />
        </div>
        <div v-else-if="active === 2" class="three">
          <ThirdStep :password-form="passwordForm" @last="last" @next="next" />
        </div>
        <div v-else class="four">
          <div class="four-box">
            <i class="iconfont icon-succeed succeed" />
            <span class="size">恭喜你，密码设置成功</span>
          </div>
          <div class="content-item">
            <button class="btn distance" @click="login">去登录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import FirstStep from '@/views/retrieve-password/component/FirstStep'
import SecondStep from '@/views/retrieve-password/component/SecondStep'
import ThirdStep from '@/views/retrieve-password/component/ThirdStep'
export default {
  name: 'Password',
  components:{
    FirstStep,
    SecondStep,
    ThirdStep
  },
  data() {
    return {
      active: 0,
      codeForm: {},
      passwordForm: {}
    }
  },
  methods: {
    login() {
      this.$router.push('/login')
    },
    last() {
      if (this.active-- > 3) this.active = 0
    },
    next() {
      if (this.active++ > 2) this.active = 0
    },
    setPasswordForm(passwordForm) {
      this.passwordForm = passwordForm
    },
    setCodeForm(codeForm) {
      this.codeForm = codeForm
    }
  }
}
</script>
<style scoped lang="scss">
  .password{
    padding-top: 127px;
    padding-bottom: 87px;
    background: #F5F5F5;
    .password-content{
      background: #FFFFFF;
      .contents{
        height: 600px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .step{
          margin-left: 470px;
          width: 490px;
        }
        .one{
          margin: 48px 0 30px 339px ;
          .back{
            margin-top: 20px;
          }
          .input{
            position: relative;
          }
          .user{
              position: absolute;
              left: 50px;
              font-size: 24px;
              top: -1px;
          }

        }
        .two{
          .num-box{
            margin: 47px 0 16px 366px;
            .title{
              margin-right: 14px;
              margin-left: -12px;
            }
          }
          .from{
            margin-left: 340px;
          }
          .input{
            position: relative;

          }
          .key{
            position: absolute;
            left: 50px;
            font-size: 21px;
            top: -3px;
          }
          .mail{
            position: relative;
          }
          .gain-btn{
            position: absolute;
            width: 92px;
            height: 40px;
            top: 0px;
            background: #F1F1F1;
            left: 338px;
            line-height: 40px;
            text-align: center;
            color: #8E8E93;
            cursor: pointer;
          }
        }
        .three{
          .three-from{
            margin-top: 47px;
            margin-left: 340px;
          }
          .input{
            position: relative;
          }
          .pass{
            position: absolute;
            left: 50px;
            font-size: 24px;
            top: -1px;
          }
          .eyes{
            position: absolute;
            left: 380px;
            font-size: 24px;
            top: -1px;
            color: #C7C7CC;
            cursor: pointer;
          }
        }
        .four{
          .four-box{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 40px;
            margin-left: 156px;
            .succeed{
              color: #67C23A;
              font-size: 48px;
            }
            .size{
              color: #8E8E93;
              margin-top: 10px;
            }
          }

        }
        .content-item{
          margin-top: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .distance{
              margin-left: 140px;
            }
            .last-step{
              background: #ffffff;
              border: 1px solid #C7C7CC;
              width: 400px;
              height: 42px;
              line-height: 42px;
              text-align: center;
              color: #A7A7AA;
              cursor: pointer;
              border-radius: 3px;
              margin-left: 140px;
              margin-bottom: 16px;
              font-size: 18px;
            }
          }
        .btn{
            background: #FF3B30;
            width: 400px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            color: #FFFFFF;
            cursor: pointer;
            border-radius: 3px;
            margin-left: 130px;
            font-size: 18px;
          }
      }
    }
    /deep/.contents{
      .el-form-item__error{
        margin-left: 30px;
      }
    }
    /deep/ .contents{
      .el-input{
        width: 400px;
        height: 42px;
      }
      .el-form-item__label{
        width: 130px !important;
      }
    }
    /deep/ .steps {
      .el-steps{
        position: absolute;
        width: 1000px;
        top:40px;
        right: -340px;
      }
    }
    /deep/ .one{
      .el-input__inner{
        text-indent: 40px;
      }
    }
    /deep/ .three-from{
      .el-input__inner{
        text-indent: 40px;
      }
    }
    /deep/ .from{
      .el-input__inner{
        text-indent: 40px;
      }
    }
    /deep/ .content-item{
      .el-input{
        width: 280px;
      }
    }
  }
</style>
